<template>
    <div class="jx-content">
        <el-form id="yform"  label-width="100px">
            <el-form-item label="课程名称：">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="课程类型：">
                <el-select v-model="form.type" placeholder="请选择课程类型">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="培养能力：">
                <el-select v-model="form.energy" placeholder="请选择培养能力">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>

            <div>
                <span class="label">课程图标：</span>
                <div class="tap">
                    <i @click="leftArrow" class="iconfont icon-xiangyou leftArrow"></i>
                    <i @click="rightArrow" class="iconfont icon-xiangyou rightArrow"></i>
                    <div class="tapBox">
                        <ul class="tapThrough">
                            <li :key="item.value" v-for="item in arr">{{item}}</li>

                        </ul>
                    </div>

                </div>
            </div>
            <div class="clear-fix"></div>
            <el-form-item label="课程简介：">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
                <div class="footer">
                    <button class="button-style saveBtn" @click="onSubmit">保存</button>
                </div>


            </el-form>
    </div>
</template>
<style>
    #yform .el-input__inner {
        width: 248px;
        height: 32px;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
    }
    #yform textarea {
        height: 120px;
        resize: none;
    }
</style>
<style scoped lang="scss">
 @import "./../../../styles/ypublic.scss";
 .footer{
     text-align: center;
     margin-top: 44px;
 }
 .saveBtn{
     padding: 0;
     width: 90px;
     height: 32px;
 }
 .label{
     padding: 0 12px 0 10px;
      float: left;
 }
.tap{
    height: 90px;
    width: 804px;
    margin: 0 0 40px 10px;
    padding: 0 17px;
    position: relative;
    float: left;
    .leftArrow,.rightArrow{
        top: 36px;
        font-size: 16px;
        color: #727272;
        z-index: 1;
        display: inline-block;
        position: absolute;
        cursor: pointer;
    }
    .leftArrow{
        left: 0;

    }
    .rightArrow{
        right: 0;
    }
    .tapBox{
        height: 90px;
        width: auto;
        overflow: hidden;
        position: relative;
        ul{
            position: absolute;
            left: 0;
            top: 0;
        }
        li{
            width: 167px;
            height: 90px;
            background: #3e4562;
            float: left;
            margin: 0 17px;
            color: #ffffff;
        }
    }
}
</style>
<script>
import $ from "jquery";
     export default {
        data() {
        return {
            form: {
            name: '',
            type: '',
            energy: '',
            desc: ''
            },
            num:0,
            arr:[0,1,2,3,4,5,6,7,8]
        }
        },
        methods: {
            rightArrow(){
               this.num++;
                if(this.num >= Math.ceil($(".tapThrough").children("li").length / 4)) {
                    this.num = 0;
                }
                $(".tapThrough").css("top", (-1 * this.num * 90) + "px");
            },
            leftArrow(){
                 this.num--;
                if(this.num < 0) {
                    this.num = Math.ceil($(".tapThrough").children("li").length / 4) - 1;
                }
                 $(".tapThrough").css("top", (-1 * this.num * 90) + "px");

            },
            onSubmit() {
                console.log('submit!');
            }
        }
  }
</script>
